<template>
    <view :style="{ '--color': color }" class="conTent">
        <view class="ViewFlex">
            <!-- #ifdef MP-WEIXIN -->
            <navBar :Back="false" :Bot="false" :bgMake="bgMake" :Color="2" title="个人中心"></navBar>
            <!-- #endif -->
            <view class="topBg" :style="{ 'padding-top': `${totalHeight}px` }">
                <view class="viewbox auto d-flex a-center j-sb m-top20">
                    <view class="d-flex a-center" v-if="!vid" @click="toUrl(`/User/login`)">
                        <view class="Header m-right24">
                            <view class="iconfont icon-zhaoxiangji white size60"></view>
                            <view class="upload_text flexac">
                                <text class="h7 white headTxt">上传头像</text>
                            </view>
                        </view>
                        <view class="d-flex f-column">
                            <text class="size32 black bold">注册/登录</text>
                            <text class="color_99 h6 m-top10">登录后即可体验更多服务</text>
                        </view>
                    </view>
                    <view class="d-flex a-center" v-if="vid">
                        <view class="Header m-right24">
                            <image :src="$imgUrls(myJson.headimg)" mode="aspectFill" class="Userhead"></image>
                            <view class="upload_text flexac" v-if="wedding.verify_msg">
                                <text class="h7 white headTxt">{{ wedding.verify_msg }}</text>
                            </view>
                        </view>
                        <view class="d-flex f-column">
                            <view class="d-flex a-center">
                                <text class="size32 black bold">{{ myJson.nickName }}</text>
                                <text class="color_99 size26 m-left20" v-if="wedding.verify_msg">{{ wedding.verify_msg }}</text>
                            </view>
                            <view class="d-flex a-center m-top6" @click.stop="$pop.setClip(myJson.sn_id)">
                                <text class="black size28">ID:{{ myJson.sn_id }}</text>
                                <view class="iconfont icon-fuzhiwenjian color_cc size28 p-left10"></view>
                            </view>
                        </view>
                    </view>
                    <view class="Edit" v-if="vid && wedding.step > 1" @click="toUrl(`/User/Edit`)">编辑资料</view>
                </view>

                <view class="viewbox auto d-flex a-center j-sb m-top10 m-bot10">
                    <view class="d-flex f-column a-center padding20" @click="toPage(`/User/follow`, 1)">
                        <text class="black size32 bold">{{ wedding.follow_num }}</text>
                        <text class="color_33 size26 m-top4">关注我的</text>
                    </view>
                    <view class="d-flex f-column a-center padding20" @click="toPage(`/User/follow`, 2)">
                        <text class="black size32 bold">{{ wedding.to_follow_num }}</text>
                        <text class="color_33 size26 m-top4">我的关注</text>
                    </view>
                    <view class="d-flex f-column a-center padding20" @click="toPage(`/User/look`, 3)">
                        <text class="black size32 bold">{{ wedding.view_num }}</text>
                        <text class="color_33 size26 m-top4">谁看过我</text>
                    </view>
                    <view class="d-flex f-column a-center padding20" @click="toPage(`/User/look`, 4)">
                        <text class="black size32 bold">{{ wedding.to_view_num }}</text>
                        <text class="color_33 size26 m-top4">我看了谁</text>
                    </view>
                </view>
            </view>

            <view class="viewbox auto VipInfo d-flex a-center">
                <view class="flex-1 d-flex f-column j-sa height">
                    <text class="white size34">{{ isVip_text }}</text>
                    <text class="color_d5 size26">{{ MemberTxt }}</text>
                </view>
                <view class="contact flexac" @click="Contact = true">
                    <view class="contact_Box flexac size26 bold color_33 t-letter2">联系红娘</view>
                </view>
            </view>

            <view class="viewbox auto m-top50">
                <!-- <view class="Options" @click="Contact = true">
					<view class="d-flex a-center">
						<image :src="$staticImg('kefu2_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32">专属红娘</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view> -->
                <view class="Options" @click="toPage(`/User/Money`)">
                    <view class="d-flex a-center">
                        <image :src="$staticImg('develop_1.png')" class="OptionIcon"></image>
                        <text class="color_33 size32">推广达人</text>
                    </view>
                    <view class="iconfont icon-a-zujian7 h6 color_cc"></view>
                </view>
                <view class="Options" @click="toUrl(`/User/introduce?id=32729`)">
                    <view class="d-flex a-center">
                        <image :src="$staticImg('agreement_1.png')" class="OptionIcon"></image>
                        <text class="color_33 size32">用户协议</text>
                    </view>
                    <view class="iconfont icon-a-zujian7 h6 color_cc"></view>
                </view>
                <view class="Options" @click="toUrl(`/User/introduce?id=32730`)">
                    <view class="d-flex a-center">
                        <image :src="$staticImg('state_1.png')" class="OptionIcon"></image>
                        <text class="color_33 size32">温馨提示</text>
                    </view>
                    <view class="iconfont icon-a-zujian7 h6 color_cc"></view>
                </view>
                <view class="Options" @click="toUrl(`/User/introduce?id=32731`)">
                    <view class="d-flex a-center">
                        <image :src="$staticImg('setting_1.png')" class="OptionIcon"></image>
                        <text class="color_33 size32">隐私协议</text>
                    </view>
                    <view class="iconfont icon-a-zujian7 h6 color_cc"></view>
                </view>
            </view>
        </view>
        <connection></connection>
        <Load v-if="!wedding"></Load>
        <Contact :Contact="Contact" @closePop="Contact = false" :InsetBottom="false"></Contact>
    </view>
</template>

<script>
    import { mapState, mapMutationsf } from 'vuex';
    import navBar from '@/components/navBar/navBar.vue';

    export default {
        components: {
            navBar
        },
        data() {
            return {
                bgMake: 1, // 1 透明 2 白色,
                Contact: false,
                addData: true,
                content: '完善全部资料即可获得脱单机会',
                myJson: '',
                wedding: ''
            };
        },
        onShow() {
            this.myInfo();
            // #ifdef H5
            let param = `share_v_id=${this.vid}`;
            this.$H5Share(param);
            // #endif
        },
        methods: {
            myInfo() {
                let that = this;
                this.$http
                    .post({
                        url: '/SRA_userIntegral/myInfo',
                        data: {
                            VeriCode: this.bid,
                            vId: this.vid
                        }
                    })
                    .then((res) => {
                        const result = res.data;
                        this.myJson = result.myJson;
                        this.wedding = result.wedding;
                        if (!this.vid || result.wedding.step >= 5) return;
                        that.$pop.modelY('提示', that.content, '完善资料').then((Res) => {
                            if (!Res) return that.$pageHome();
                            switch (that.wedding.step) {
                                case 1:
                                    that.toUrl(`/User/loginOne`);
                                    break;
                                case 2:
                                    that.toUrl(`/User/loginTwo`);
                                    break;
                                case 3:
                                    that.toUrl(`/User/DataOne?procedure=1`);
                                    break;
                                case 4:
                                    that.toUrl(`/User/DataOne?procedure=2`);
                                    break;
                                case 5:
                                    that.toUrl(`/User/DataOne?procedure=3`);
                                    break;
                            }
                        });
                    });
            },
            toPage(url, num) {
                if (!this.vid) return this.toUrl(`/User/login`);
                this.toUrl(`${url}?type=${num}`);
            }
        },
        computed: {
            ...mapState(['totalHeight', 'color', 'vid', 'bid', 'share', 'title']),
            isVip_text() {
                if (!this.vid) return `欢迎来到${this.title}`;
                return this.wedding.is_vip == 1 ? `有效期至 ${this.wedding.expire_at}` : '尚未开通会员';
            },
            MemberTxt() {
                if (!this.vid) return `更多会员权益等你解锁`;
                return '会员权益：享受红娘牵线服务';
            }
        },
        onShareAppMessage() {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/startUp/startUp?share_v_id=${this.vid}`,
                imageUrl: share.imageUrl
            };
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $pageBg;
    }
</style>
<style lang="scss" scoped>
    .conTent {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .ViewFlex {
        flex: 1;
        overflow-y: scroll;
    }

    .topBg {
        width: 100%;

        background-image: linear-gradient(to top, $pageBg 0%, #f4e5e8 50%, #f2d4da 100%);
    }

    .Header {
        width: 110rpx;
        height: 110rpx;
        background-color: #fae2e1;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        transform: translateY(0);
    }

    .Userhead {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .upload_text {
        width: 100%;
        height: 30rpx;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .headTxt {
        zoom: 0.7;
    }

    .icon-zhaoxiangji {
        text-align: center;
        margin-top: 18rpx;
    }

    .Edit {
        width: 180rpx;
        height: 60rpx;
        color: #ffffff;
        font-size: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30rpx;
        background-color: var(--color);
        // background-image: linear-gradient(to right,#fac7c3 0%, var(--color) 100%);
    }

    .VipInfo {
        height: 160rpx;
        padding: 20rpx 30rpx;
        background-image: url('http://sraimgcdn2.mogoie.com/Uploads/xiangqing/userbg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        border-radius: 20rpx;
    }

    .contact {
        width: 110rpx;
        height: 110rpx;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
    }

    .contact_Box {
        width: 98rpx;
        height: 98rpx;
        padding: 0 18rpx;
        text-align: center;
        background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
        border-radius: 50%;
    }

    .Options {
        width: 100%;
        height: 90rpx;
        margin: 20rpx auto 0 auto;
        background-color: #ffffff;
        padding: 0 20rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .OptionIcon {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
    }

    .dome {
        width: 100%;
        height: 300rpx;
        position: relative;
    }
</style>